<template>
  <view>
	<canvas canvas-id="canvasid" id="canvasid" class="charts" @touchend="tap"/>
  </view>
</template>

<script>
import uCharts from '@/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};
export default {
	props:{
		res:{
			typeof:Object,
			default:{}
		},
	},
	data() {
		return {
			cWidth: 690,
			cHeight: 400
		};
	},
	created() {
		//这里的 690 对应 css .charts 的 width
		this.cWidth = uni.upx2px(690);
		//这里的 400 对应 css .charts 的 height
		this.cHeight = uni.upx2px(400);
		this.drawCharts('canvasid', this.res);
	},
	methods: {
		drawCharts(id,data){
		  const ctx = uni.createCanvasContext(id, this);
		  uChartsInstance[id] = new uCharts({
			type: "area",
			context: ctx,
			width: this.cWidth,
			height: this.cHeight,
			categories: data.categories,
			series: data.series,
			animation: true,
			timing: "easeOut",
			duration: 1000,
			rotate: false,
			rotateLock: false,
			background: "#FFFFFF",
			color: ["#FC8452"],
			fontSize: 13,
			fontColor: "#666666",
			dataLabel: false,
			dataPointShape: false,
			dataPointShapeType: "solid",
			touchMoveLimit: 60,
			enableScroll: false,
			enableMarkLine: false,
			legend: {
			  show: false,
			},
			xAxis: {
			  axisLine: true,
			  gridType: "solid",
			  gridColor: "#CCCCCC",
			  boundaryGap: "center",
			  rotateLabel:true,
			  rotateAngle:45,
			  labelCount:12,
			},
			yAxis: {
			  gridType: "solid",
			  showTitle: false,
			  data: [{
				  type: "value",
				  title: "瞬时功率",
			  }]
			},
			extra: {
			  area: {
				addLine: true,
				gradient: true,
			  },
			  tooltip: {
				showBox: true,
			  },
			  markLine: {
				type: "solid",
				dashLength: 4,
				data: []
			  }
			}
		  });
		},
		tap(e){
		  uChartsInstance[e.target.id].touchLegend(e);
		  uChartsInstance[e.target.id].showToolTip(e);
		}
	}
};
</script>

<style>
  .charts{
    width: 690rpx;
    height: 400rpx;
	margin: 0 auto 20rpx;
  }
</style>